<template>
  <div class="charge_item_set_info">

    <!--面包屑导航模板-->
    <!--<el-breadcrumb class="topNav" separator="/">-->
    <!--<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
    <!--<el-breadcrumb-item>活动管理</el-breadcrumb-item>-->
    <!--<el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
    <!--<el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
    <!--</el-breadcrumb>-->

    <!--标题模板-->
    <el-row>
      <el-col :span="24"><div class="title-template">收费项目信息</div></el-col>
    </el-row>

    <div class="info-template-content">
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目名称</el-col>
        <el-col :span="19" style="color: #333">{{itemName}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目类型</el-col>
        <el-col :span="19" style="color: #333">{{typeName}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目起始时间</el-col>
        <el-col :span="19" style="color: #333">{{beginDate}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目结束时间</el-col>
        <el-col :span="19" style="color: #333">{{endDate}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目描述</el-col>
        <el-col :span="19" style="color: #333">{{desc}}</el-col>
      </el-row>
      <el-row class="item-row" style="margin-bottom: 0;">
        <el-col :span="3" style="color: #666">状态</el-col>
        <el-col :span="19" style="color: #333">{{status}}</el-col>
      </el-row>
    </div>

  </div>
</template>

<script>

  export default {
    data(){
      return{
        itemName:'',
        typeName: '',
        beginDate: '',
        endDate: '',
        desc: '这是项目描述',
        status: '正常'
      }
    },
    methods: {

    },
    created(){
        var row = this.$route.query.row;
        this.itemName = row.itemName;
        this.typeName = row.typeName;
        this.beginDate = row.beginDate;
        this.endDate = row.endDate;
//        console.log(row);
    }
  }
</script>

<style scoped>
  /*.charge_item_set_info .topNav{*/
    /*margin-left: 30px;*/
    /*margin-bottom: 20px;*/
  /*}*/
  .charge_item_set_info .title-template{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #333333;
    background: #ffffff;
  }

  .charge_item_set_info .info-template-content{
    background: #ffffff;
    padding: 50px;
  }
  .charge_item_set_info .item-row{
    margin-bottom: 50px;
    font-size: 16px;
  }

</style>

